<template>
  <div class="waypoint-details">
    <div class="controls">
      <el-row type="flex" justify="center">
        <el-button size="small" type="success" @click="emit('add-record')">新建记录</el-button>
        <el-button 
          size="small" 
          type="danger" 
          :disabled="currentIndex == 0 ? true : false"
          @click="emit('del-record')"
        >
          删除记录
        </el-button>
      </el-row>
      
      <br />
      
      <el-row v-show="currentIndex == 0 ? false : true" type="flex" justify="center">
        <el-button type="text" size="small" @click="emit('last-record')">
          <i class="el-icon-arrow-left"></i>
        </el-button>
        <el-input v-model="currentIndexName" style="width: 150px;"></el-input>
        <el-button type="text" size="small" @click="emit('next-record')">
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </el-row>
      
      <br />
      
      <el-form v-show="currentIndex == 0 ? false : true" label-width="90px" size="small">
        <el-form-item label="空中点">
          <span style="color: white">{{ currentRecord.point_coordinate.longitude.toFixed(6) }}, </span>
          <span style="color: white">{{ currentRecord.point_coordinate.latitude.toFixed(6) }} </span>
          <el-button size="small" @click="emit('edit-record')">编辑</el-button>
        </el-form-item>
        
        <el-form-item label="空中点高度">
          <el-input-number 
            size="small" 
            :min="0" 
            :max="1000" 
            v-model="currentRecord.point_fly_height"
          ></el-input-number>
        </el-form-item>
        
        <el-form-item label="空中点速度">
          <el-input-number 
            size="small"
            :min="0" 
            :max="100" 
            v-model="currentRecord.point_fly_speed"
          ></el-input-number>
        </el-form-item>
        
        <el-form-item label="飞行模式">
          <el-select v-model="currentRecord.flightPathMode">
            <el-option 
              v-for="item in flightPathModeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <hr />

        <div v-for="(group, index) in currentRecord.point_actions" :key="index" class="group-container">
          <div class="group-content">
            <el-form-item :label="`动作${index+1}`">
              <el-select v-model="group.action_type" size="small" placeholder="请选择">
                <el-option 
                  v-for="item in actionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            
            <!-- 条件渲染 -->
            <el-form-item v-if="group.action_type === 6" label="转动角度">
              <el-input-number 
                size="small" 
                v-model="group.action_param_value" 
                :min="-180" 
                :max="180"
              ></el-input-number>
            </el-form-item>
            
            <el-form-item v-else-if="group.action_type === 40" label="地面点">
              <span style="color: white">{{ group.point_ground.longitude.toFixed(6) }}, </span>
              <span style="color: white">{{ group.point_ground.latitude.toFixed(6) }} </span>
              <el-button size="small" @click="emit('edit-ground-record')">编辑</el-button>
            </el-form-item>

            <el-form-item v-if="group.action_type === 7" label="变焦值调整">
              <el-input-number 
                size="small" 
                v-model="group.action_param_value" 
                :min="1" 
                :max="7"
              ></el-input-number>
            </el-form-item>

            <el-form-item v-if="group.action_type === 8" label="时间间隔">
              <el-input-number 
                size="small" 
                v-model="group.action_param_value" 
                :min="1" 
                :max="60"
              ></el-input-number>
            </el-form-item>

            <el-form-item v-if="group.action_type === 9" label="距离间隔">
              <el-input-number 
                size="small" 
                v-model="group.action_param_value" 
                :min="1" 
                :max="1000"
              ></el-input-number>
            </el-form-item>

            <el-form-item v-if="group.action_type === 12" label="照明模式">
              <el-select v-model="group.action_param_value" placeholder="请选择">
                <el-option label="持续" value="0" />
                <el-option label="闪烁" value="1" />
              </el-select>
            </el-form-item>

          </div>

          <!-- 右上角的 × 按钮 -->
          <button class="delete-btn" @click.stop="emit('del-action', index)">
            &times;
          </button>
        </div>
        
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="emit('add-action')">
            添加动作
          </el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义 props
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0
  },
  currentRecord: {
    type: Object,
    default: () => ({})
  },
  flightPathModeOptions: {
    type: Array,
    default: () => []
  },
  actionOptions: {
    type: Array,
    default: () => []
  }
})

// 定义 emits
const emit = defineEmits([
  'add-record',
  'del-record', 
  'last-record',
  'next-record',
  'edit-record',
  'edit-ground-record',
  'add-action',
  'del-action'
])

// 计算属性
const currentIndexName = computed({
  get() {
    if (!props.currentRecord.positionName) {
      props.currentRecord.positionName = "航点" + props.currentIndex.toString()
    }
    return props.currentRecord.positionName
  },
  set(value) {
    props.currentRecord.positionName = value
  }
})
</script>

<style lang="scss" scoped>
.waypoint-details {
  .group-container {
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    transition: border 0.3s ease;
  }

  .group-container:hover {
    border: 1px solid #eee;
  }

  .delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    display: none;
  }

  .group-container:hover .delete-btn {
    display: block;
  }
}
</style>
